<template>
	<view class="play-page">
		<top-navigation isShow isFix backIconColor='#FFF' isBack :custom='true' :customNum='100'>
			<template #center-slot>
				<view class="paihang">
					<x-card v-if="!roomid" fontSize="36rpx" background="#FFFFFF00" color="#FFF" border="none">
						当前人数:{{playerNum}}</x-card>
					<x-card @tap="getOnlineInfo"  v-if="roomid" fontSize="36rpx" background="#FFFFFF00" color="#FFF" border="none">
						<uni-icons :type="iconsLink" size="26" color="#FFF"></uni-icons>
						在线人数:{{onlinePlayerNum}}</x-card>
				</view>
			</template>
		</top-navigation>
		<view class="justify-center align-center" style="width: 100vw;">
			<view class="justify-start" v-if="roomid">
				<x-card fontSize="36rpx" padd="10rpx" color="#FFF" background="#00aa00" border="none"
					@tap="qrcodeShow=true">邀请好友</x-card>
				<view class="justify-start" v-if="qrcodeShow">
					<x-card fontSize="36rpx" padd="10rpx" margin="0 10rpx 0 0" background="#aa0000" color="#FFF"
						border="none" @tap="qrcodeShow=false">关闭</x-card>
					<view class="" style="border:5px solid #FFF">
						<uqrcode :size="100" canvas-id="qrcode" :value="roomid"></uqrcode>
					</view>
					<!--uqrcode 组件来源，插件Sansnn-uQRCode 链接地址：https://ext.dcloud.net.cn/plugin?id=1287-->
				</view>
			</view>
			<x-card v-if="!roomid" fontSize="36rpx" padd="10rpx" margin="0 10rpx 0 0" background="#aa0000" color="#FFF" border="none"
				@tap="handleUpdate">修改</x-card>
			<x-card fontSize="36rpx" padd="10rpx" color="#FFF" background="#00aa00" border="none"
				@tap="ruleShow=true">帮助</x-card>
			<x-card fontSize="36rpx" background="#FFFFFF00" color="#FFF" border="none">剩余张数: {{cardNum}}/52</x-card>
		</view>
		
		<view class="justify-center align-center" style="width: 100vw;" :style="{display:menuShow?'flex':'none'}">
			<x-card fontSize="36rpx" background="#FFFFFF00" color="#FFF" border="none">随机封面</x-card>
			<view class="">
				<view class=" button b2" @tap="cardFace=!cardFace" :style="{background:!cardFace?'#fcebeb':'#ebf7fc'}">
					<view class="" :class="[!cardFace?'add':'']">
						<view class="knobs">
							<text></text>
						</view>
						<view class="layer"></view>
					</view>
				</view>
			</view>
			<x-card v-if="!cardFace" fontSize="36rpx" padd="10rpx" margin="0 10rpx 0 10rpx" background="#00aa00"
				color="#FFF" border="none" @tap="pokerShow=true">我的收藏</x-card>
			<x-card v-if="cardFace" fontSize="36rpx" background="#FFFFFF00" color="#FFF" border="none">光泽</x-card>
			<view class="" v-if="cardFace">
				<view class=" button b2" @tap="gloss=!gloss" :style="{background:!gloss?'#fcebeb':'#ebf7fc'}">
					<view class="" :class="[!gloss?'add':'']">
						<view class="knobs">
							<text></text>
						</view>
						<view class="layer"></view>
					</view>
				</view>
			</view>
			<view class="justify-center" v-if="cardFace">
				<view @tap="collection" v-if="!isCollection" class="justify-center align-center"
					style="margin-left: 10rpx;color: #FFF;font-size: 25px;">
					☆
				</view>
				<view v-else class="justify-center align-center" style="margin-left: 10rpx;color: #FFF;">
					⭐
				</view>
			</view>

		</view>
		<view class="" style="width: 100vw;padding-top: 40rpx;">
			<view class="poker justify-center align-center " @tap='flipOver'
				:class="[flipOverLoading?'poker-over poker-just':shuffleLoading?'poker-face':'poker-back']"
				:style="{'box-shadow': `0 0 20px ${gloss?flipOverLoading?unbackbg:backbg:'#000'}` }">
				<!-- 背面 -->
				<view class="back-box">
					<!-- 背面背景 -->
					<view class=" " v-if="!cardFace" :class="[cardFace?'poker-bg-random':'poker-bg']">
					</view>
					<colorBg v-if="cardFace" :isBack='true' :gloss='gloss' ref="colorBgRefb"
						@customColor='setBoxshadow'></colorBg>
				</view>
				<!-- 正面 -->
				<view class="poker-just-box">
					<view v-if="!cardFace" class="justify-center align-center "
						:class="[cardFace?'poker-bg-random':'poker-bg']">
						<view class="front-box flex-col align-center">
							<view class="">
								{{currentCard.val}}
							</view>
							<image class="logo" src="/cardgame/static/game/bg/bg.jpg" mode=""></image>
							<view class="front-box-text">
								{{currentCard.text}}
							</view>
						</view>
					</view>
					<colorBg v-if="cardFace" :isBack='false' ref="colorBgRefa" :gloss='gloss'
						@customColor='setBoxshadow'>
						<view class="justify-center align-center " style="width: 100%;height: 100%;">
							<view class="front-box flex-col align-center">
								<view class="">
									{{currentCard.val}}
								</view>
								<image class="logo" src="/cardgame/static/game/bg/bg.jpg" mode=""></image>
								<view class="front-box-text">
									{{currentCard.text}}
								</view>
							</view>
						</view>
					</colorBg>
				</view>
			</view>
		</view>
		<view class="side-reminder">
			请{{player}}号玩家 {{isPositive?'看牌':'点击卡牌翻牌'}}
		</view>
		<view class="side-reminder-r" @tap="menuShow = !menuShow">
			{{menuShow?'纯净模式':'菜单'}}
		</view>

		<view class="side-reminder-r1" @tap="toggle" v-if="cardFace" :style="{display:menuShow?'flex':'none'}">
			点我切换牌背景
		</view>
		<!-- 玩家列表 -->
		<view class="" style="width: 100vw;margin-top: 20rpx;">
			<uni-grid :column="6" :highlight="true" >
				<template v-for="(item,i) in onlinePlayerNum" :key="i">
					<uni-grid-item :index="i" >
						<view class="grid-item-box" style="background-color: #fff;">
							<!-- <image :src="'/static/grid/c'+(i+1)+'.png'" class="image" mode="aspectFill" /> -->
							<text class="text">{{item}}</text>
						</view>
					</uni-grid-item>
				</template>
			</uni-grid>
		</view>
		<view class="operation-records">
			操作记录可以查看卡牌使用情况
		</view>
		<view class="justify-around">
			<view class="">
				<button class="custom-btn btn-8" @tap="recordShow=true"><text>操作记录</text></button>
			</view>
			<view class="">
				<button class="custom-btn btn-6" @tap="shuffle"><text>重新洗牌</text></button>
			</view>
		</view>
		<!-- <pokerModal v-if="pokerShow" @close='pokerShow=false' @use='cardFace=true'></pokerModal> -->
		<recordModal v-if="recordShow" :record='record' @close="recordShow=!recordShow"></recordModal>
		<bsRule v-if="ruleShow" @tap="ruleShow=!ruleShow"></bsRule>
		<bs-particles :particlestyle='particlestyle'></bs-particles>
	</view>
</template>

<script setup>
	import {
		CARD
	} from '../game/data.js'
	import bsRule from '../rule/rule.vue'
	import recordModal from '../com/recordModal.vue'
	import colorBg from '../com/colorBg.vue'
	import pokerModal from '../com/pokerModal.vue'
	import uqrcode from "@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode"
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		ref,
		onMounted,onUnmounted
	} from 'vue'
	onUnmounted(() => {
		shortExit()
	})
	const cardPush = uniCloud.importObject('card-push')
	// 删除房间
	const deleteRoom =async ()=>{
		await cardPush.deleteRoom()
	}
	
	// 退出房间
	const shortExit =async ()=>{
		await cardPush.shortExit()
	}
	// 获取在线信息
	const getOnlineInfo =async ()=>{
		const push_clientid = uni.getStorageSync('push_clientid')
		
		console.log('获取在线信息');
		let res = await cardPush.onlineInfo(roomid.value,push_clientid)
	}
	
	onLoad((e) => {
		if (e.roomid) {
			uni.onPushMessage((res) => {
				console.log("收到推送消息：", res) //监听推送消息
			})
			roomid.value = e.roomid
			uni.onSocketOpen(async function () {
			let res = await cardPush.onlineInfo(roomid.value)
			if(res.data&&res.data[0].online_num){
				
				onlinePlayerNum.value= res.data[0].online_num.length
			}else{
				onlinePlayerNum.value= res.doc.online_num.length
			}
			  console.log('WebSocket连接已打开！');
			});
			uni.onSocketMessage(function(res) {
				console.log('收到服务器内容：' + res.data);
				let data = JSON.parse(res.data)
				// getSocketStatus(data)
			});
		} else {
			if (e.peoplenum) {
				playerNum.value = e.peoplenum
			}
		}
		console.log('onload', e);
	})
	const getSocketStatus = (data) => {
		if (data.command == 16) {
			iconsLink.value = 'spinner-cycle'
		} else if (data.command == 48 || data.command == 0 || data.command == 80) {
			iconsLink.value = 'link'
		} else {
			iconsLink.value = 'spinner-cycle'
		}
	}
	const iconsLink = ref('spinner-cycle')

	const qrcodeShow = ref(false) //二维码展示
	const gloss = ref(true) //光泽
	const roomid = ref('') //房间id
	const pokerShow = ref(false) //光泽
	const uCARD = ref(CARD)
	const cardList = ref([])
	const cardNum = ref(52)
	const playerNum = ref(1) //玩家数量
	const onlinePlayerNum = ref(0) //玩家数量
	const player = ref(1)
	const ruleShow = ref(false)
	const menuShow = ref(false) //纯净
	const recordShow = ref(false)
	const cardFace = ref(true) //显示自定义
	const record = ref([]) //操作记录
	let config_custom = uni.getStorageSync('color_config_custom')
	if (config_custom) {
		console.log('自动以牌');
		cardFace.value = true
	}
	const handleUpdate = () => {
		uni.reLaunch({
			url: '/cardgame/game/game'
		})
	}

	const colorBgRefa = ref(null);
	const colorBgRefb = ref(null);
	const toggle = () => {
		if (cardFace.value) {
			isCollection.value = false
			colorBgRefa.value.init()
			colorBgRefb.value.init()
		}
	}
	const isCollection = ref(false)
	// collection收集喜欢的颜色
	const collection = () => {
		colorBgRefb.value.save().then(() => {
			isCollection.value = true
			uni.showToast({
				title: '收藏成功',
				icon: 'success'
			})
		})
	}
	// 设置牌发光 setBoxshadow
	const backbg = ref('')
	const unbackbg = ref('')
	// console.log('this.animate',this.animate);
	const setBoxshadow = (e, isBack) => {
		console.log('isBack', isBack);
		if (isBack) {
			backbg.value = e
		} else {
			unbackbg.value = e
		}
		console.log('发光色值', e);
		console.log("\n %c 发光色值".concat('', ` %c ${e} \n\n`), `color: #ffffff; background: ${e}; padding:5px 0;`,
			'color: #3c9cff;background: #ffffff; padding:5px 0;');
	}
	// 当前牌
	const currentCard = ref({})
	// 拿到的牌
	const getCard = () => {
		let card = randomCard()
		cardNum.value--
		return card
	}
	// 随机拿牌
	const randomCard = () => {
		let index = Math.floor(Math.random() * cardList.value.length)
		let card = cardList.value[index]
		cardList.value.splice(index, 1)
		return card
	}
	// 翻转
	const flipOverLoading = ref(false)
	const isPositive = ref(false) //是正面
	const flipOver = (e) => {
		// toggle()
		if (cardNum.value == 0) {
			uni.showModal({
				content: '牌已经翻完了，请重新洗牌',
				showCancel: true,
				confirmText: '重新洗牌',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						shuffle()
						flipOverLoading.value = false
						isPositive.value = false
						console.log('用户点击确定')
					} else if (res.cancel) {
						console.log('用户点击取消')
					}
				}
			})

			return
		}
		if (!isPositive.value) {
			currentCard.value = getCard()
			record.value.push({
				player: player.value,
				content: currentCard.value.val
			})
		} else {
			player.value++
			if (player.value > playerNum.value) {
				player.value = 1
			}
		}
		flipOverLoading.value = !flipOverLoading.value
		isPositive.value = !isPositive.value

		console.log('翻转', e);
	}
	// 生成52张扑克
	const generateCard = () => {
		// 向上取整
		let cardNum = Math.ceil(52 / uCARD.value.length)
		console.log('cardNum', cardNum);
		for (let i = 0; i < cardNum; i++) {
			cardList.value.push(...uCARD.value)
		}
	}
	generateCard()
	// 洗牌
	const shuffleLoading = ref(false)
	// 开始洗牌
	const shuffle = () => {
		shuffleLoading.value = !shuffleLoading.value
		flipOverLoading.value = false
		isPositive.value = false
		cardNum.value = 52
		record.value = []
		generateCard()
		setTimeout(() => {
			shuffleLoading.value = !shuffleLoading.value
		}, 1000)
	}
	const particlestyle = ref({
		"style": "default",
		"zindex": -1,
		"bgcolor": "#000022"
	})
</script>

<style lang="scss" scoped>
	.play-page {
		width: 100vw;
		background: #21252B;
		min-height: 100vh;
	}

	@keyframes pokerface {
		0% {
			transform: rotate3d(0, 0, 1, 0deg) scale(0.5);
		}

		100% {
			transform: rotate3d(0, 0, 1, 360deg) scale(0.5);
		}

	}

	@keyframes pokerover {
		0% {
			transform: rotate3d(0, 1, 0, 0deg) scale(1);
		}

		100% {
			transform: rotate3d(0, 1, 0, 180deg) scale(1);
		}

	}

	.poker-face {
		animation: pokerface .1s ease-in-out infinite;
	}

	.poker-back {
		animation: pokertrans 2s ease-in-out infinite;
	}

	.poker-over {
		animation: pokerover 1s ease-in-out 1;
	}

	.poker-just {
		transform: rotate3d(0, 1, 0, 180deg) scale(1);
	}

	/* Button 14 */
	.button {
		position: relative;
		// top: 50%;
		width: 74px;
		height: 36px;
		// margin: -20px auto 0 auto;
		overflow: hidden;
	}

	.button.b2 {
		border-radius: 2px;
	}

	.knobs:before,
	.knobs:after,
	.knobs text:before,
	.knobs text:after {
		position: absolute;
		top: 4px;
		width: 20px;
		height: 10px;
		font-size: 10px;
		font-weight: bold;
		text-align: center;
		line-height: 1;
		padding: 9px 4px;
		border-radius: 2px;
		transition: 0.3s ease all;
	}

	.knobs:before,
	.knobs:after {
		color: #4e4e4e;
		z-index: 1;
	}

	.knobs:before {
		content: 'YES';
		left: 4px;
	}

	.knobs:after {
		content: 'NO';
		right: 4px;
	}

	.knobs text {
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
	}

	.knobs text:before {
		left: 4px;
		top: -28px;
		background-color: #f44336;
	}

	.knobs text:after {
		top: 4px;
		left: 39px;
		background-color: #03a9f4;
	}

	.knobs text:before,
	.knobs text:after {
		content: '';
		width: 23px;
		z-index: 2;
	}

	.add {
		.knobs text:before {
			top: 4px;
		}

		.knobs text:after {
			top: -28px;
		}
	}



	@keyframes showtext {
		0% {
			transform: translate(-100%, -50%);
		}

		100% {
			transform: translate(0, -50%);
		}
	}


	.side-reminder {
		position: fixed;
		left: 0;
		top: 50%;
		transform: translate(0, -50%);
		font-size: 50rpx;
		color: #FFF;
		font-weight: 600;
		width: 50rpx;
		text-align: center;
		// writing-mode:vertical-rl;
		animation: showtext 0.5s ease-in-out 1;
	}

	.side-reminder-r {
		position: fixed;
		right: 0;
		top: 30%;
		transform: translateY(-50%);
		font-size: 30rpx;
		color: #FFF;
		font-weight: 600;
		width: 30rpx;
		text-align: center;
		// writing-mode:vertical-rl;
	}

	.side-reminder-r1 {
		position: fixed;
		right: 0;
		top: 60%;
		transform: translateY(-50%);
		font-size: 50rpx;
		color: #FFF;
		font-weight: 600;
		width: 50rpx;
		text-align: center;
		// writing-mode:vertical-rl;
	}

	.operation-records {
		margin: 40rpx 0 20rpx;
		color: #FFF
	}

	@keyframes trans {
		0% {
			transform: translate3d(0, 150rpx, 10px);
		}

		50% {
			transform: translate3d(0, 0, 0px);
		}

		100% {
			transform: translate3d(0, 150rpx, 10px);
		}
	}

	@keyframes pokertrans {
		0% {
			// box-shadow: 0 0 0px rgba(255, 255, 255, 0);
			transform: translate3d(0, 10rpx, 10px);
		}

		50% {
			// box-shadow: 0 0 20px rgba(255, 255, 255, 1);
			transform: translate3d(0, 0, 0px);
		}

		100% {
			// box-shadow: 0 0 0px rgba(255, 255, 255, 0);
			transform: translate3d(0, 10rpx, 10px);
		}
	}

	.poker-just-box {
		position: absolute;
		width: 100%;
		height: 100%;
		transform: rotateY(180deg) translate3d(0, 0, 2px);
		border-radius: 40rpx;
		overflow: hidden;
		color: #000000;
		font-weight: bold;

		// background: #ff557f;
		.front-box {
			width: 450rpx;
			height: 830rpx;
			background: #FFF;
			padding-top: 20rpx;
			position: relative;
			z-index: 100;
			border-radius: 20rpx;
			transition: transform 1s;
			font-size: 60rpx;

			.logo {
				margin: 20rpx 0;
				width: 300rpx;
				height: 300rpx;
				border-radius: 50%;
			}

			.front-box-text {
				padding: 0 20rpx;
				text-indent: 2em;
				font-size: 36rpx;
				font-weight: 400;
				line-height: 1.1;
			}
		}
	}



	.poker {
		position: relative;
		width: 500rpx;
		height: 880rpx;
		border-radius: 40rpx;
		background: #000000;
		margin: 0 auto;
		transition: all 1s;
		// box-shadow: 0 0 10rpx #000;
		transform-style: preserve-3d;

		.back-box {
			width: 450rpx;
			height: 830rpx;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			z-index: 10;
			background: #000000;
		}

		// transition: all 1s ease-out;
		.tip {
			position: relative;
			width: 100%;
			height: 100%;

			font-weight: bold;
			color: #ffffff;
			font-size: 65rpx;

			.card-player {
				width: 100%;
				text-align: center;
				position: absolute;
				bottom: 50rpx;
				animation: trans 3s ease-in-out infinite;
			}
		}
	}

	.poker-bg-random {
		// rgb(112.98763113051488, 219.58372776423846, 205.8542758138317);
		// rgb(182.7547052520719, 87.10157536253901, 22.090357973396117);
		// --colorThird: rgb(236.82792978079584, 247.08870372682006, 149.20436690456899);
		position: relative;

		$colorMain: rgb(random(255), random(255), random(255));
		$colorSub: rgb(random(255), random(255), random(255));
		$colorThird: rgb(random(255), random(255), random(255));
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: conic-gradient(from random(360)+deg, $colorMain, transparent, $colorSub, transparent, $colorMain);

		&::after {
			$smallSize: random(4px)+1px;
			$size: random(7px)+5px;
			$maskSize: random(40px)+20px;

			// content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: repeating-linear-gradient($colorMain 0px, $colorSub 20px);
			mask:
				linear-gradient(135deg, #fff $smallSize, transparent 0),
				linear-gradient(-135deg, #fff $smallSize, transparent 0),
				linear-gradient(45deg, #fff $smallSize, transparent 0),
				linear-gradient(-45deg, #fff $smallSize, transparent 0),
				linear-gradient(135deg, #fff $size, transparent 0),
				linear-gradient(-135deg, #fff $size, transparent 0),
				linear-gradient(45deg, #fff $size, transparent 0),
				linear-gradient(-45deg, #fff $size, transparent 0);
			mask-size: $maskSize $maskSize;
			mask-position: 50% 50%;
			-webkit-mask-composite: xor;
		}

		&::before {
			$size: random(13px)+2px;
			$maskSize: random(65px)+10px;
			$percentage: random(20%)+10%; //% 差个百分比

			// random(10, 30)%  
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(random(360)+deg, $colorMain, $colorSub);
			mask: linear-gradient(135deg, #fff $size, transparent 0),
			linear-gradient(-135deg, #fff $size, transparent 0),
			linear-gradient(45deg, #fff $size, transparent 0),
			linear-gradient(-45deg, #fff $size, transparent 0),
			linear-gradient(135deg, #fff calc(#{$percentage} + #{$size}), transparent 0),
			linear-gradient(-135deg, #fff calc(#{$percentage} + #{$size}), transparent 0),
			linear-gradient(45deg, #fff calc(#{$percentage} + #{$size}), transparent 0),
			linear-gradient(-45deg, #fff calc(#{$percentage} + #{$size}), transparent 0),
			linear-gradient(135deg, #fff calc(#{$percentage} + #{$percentage} + #{$size}), transparent 0),
			linear-gradient(-135deg, #fff calc(#{$percentage} + #{$percentage} + #{$size}), transparent 0),
			linear-gradient(45deg, #fff calc(#{$percentage} + #{$percentage} + #{$size}), transparent 0),
			linear-gradient(-45deg, #fff calc(#{$percentage} + #{$percentage} + #{$size}), transparent 0);
			mask-size: $maskSize $maskSize;
			mask-position: 50% 50%;
			-webkit-mask-composite: xor;
		}


	}

	.poker-bg {
		// rgb(112.98763113051488, 219.58372776423846, 205.8542758138317);
		// rgb(182.7547052520719, 87.10157536253901, 22.090357973396117);
		// --colorThird: rgb(236.82792978079584, 247.08870372682006, 149.20436690456899);
		position: relative;

		$colorMain: rgb(112.98763113051488, 219.58372776423846, 205.8542758138317);
		$colorSub: rgb(182.7547052520719, 87.10157536253901, 22.090357973396117);
		$colorThird: rgb(236.82792978079584, 247.08870372682006, 149.20436690456899);
		width: 100%;
		height: 100%;
		overflow: hidden;
		// conic-gradient(from random(360)+deg, $colorMain, transparent, $colorSub, transparent, $colorMain);
		background: conic-gradient(from 262.4795780158499deg, $colorMain, transparent, $colorSub, transparent, $colorMain);
		// @nth(2) {
		// background: linear-gradient(var($colorMain), var($colorSub));
		// }

		// @nth(3) {
		// background: unset;
		// }
		&::after {

			$smallSize: 3.4497526047647797px;
			$size: 7.096860553031554px;
			$maskSize: 48.36261197232754px;
			// content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: repeating-linear-gradient($colorMain 0px, $colorSub 20px);
			mask:
				linear-gradient(135deg, #fff $smallSize, transparent 0),
				linear-gradient(-135deg, #fff $smallSize, transparent 0),
				linear-gradient(45deg, #fff $smallSize, transparent 0),
				linear-gradient(-45deg, #fff $smallSize, transparent 0),
				linear-gradient(135deg, #fff $size, transparent 0),
				linear-gradient(-135deg, #fff $size, transparent 0),
				linear-gradient(45deg, #fff $size, transparent 0),
				linear-gradient(-45deg, #fff $size, transparent 0);
			mask-size: $maskSize $maskSize;
			mask-position: 50% 50%;
			-webkit-mask-composite: xor;
		}

		&::before {
			$size: 10.195587px;
			$maskSize: 61.97408102661273px;
			$percentage: 21.867671691747415%; //% 差个百分比
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(272.4720895915613deg, $colorMain, $colorSub);
			mask: linear-gradient(135deg, #fff $size, transparent 0),
			linear-gradient(-135deg, #fff $size, transparent 0),
			linear-gradient(45deg, #fff $size, transparent 0),
			linear-gradient(-45deg, #fff $size, transparent 0),
			linear-gradient(135deg, #fff calc(#{$percentage} + #{$size}), transparent 0),
			linear-gradient(-135deg, #fff calc(#{$percentage} + #{$size}), transparent 0),
			linear-gradient(45deg, #fff calc(#{$percentage} + #{$size}), transparent 0),
			linear-gradient(-45deg, #fff calc(#{$percentage} + #{$size}), transparent 0),
			linear-gradient(135deg, #fff calc(#{$percentage} + #{$percentage} + #{$size}), transparent 0),
			linear-gradient(-135deg, #fff calc(#{$percentage} + #{$percentage} + #{$size}), transparent 0),
			linear-gradient(45deg, #fff calc(#{$percentage} + #{$percentage} + #{$size}), transparent 0),
			linear-gradient(-45deg, #fff calc(#{$percentage} + #{$percentage} + #{$size}), transparent 0);
			mask-size: $maskSize $maskSize;
			mask-position: 50% 50%;
			-webkit-mask-composite: xor;
		}


	}

	.custom-btn {
		width: 130px;
		height: 40px;
		color: #000000;
		font-weight: 800;
		border-radius: 5px;
		padding: 10px 25px;
		font-family: 'Lato', sans-serif;
		background: #FFF;
		cursor: pointer;
		transition: all 0.3s ease;
		position: relative;
		display: inline-block;
		box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
			7px 7px 20px 0px rgba(0, 0, 0, .1),
			4px 4px 5px 0px rgba(0, 0, 0, .1);
		outline: none;
	}

	.btn-8 {
		background-color: #f0ecfc;
		background-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%);
		line-height: 42px;
		padding: 0;
		border: none;
	}

	.btn-8 text {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}

	.btn-8:before,
	.btn-8:after {
		position: absolute;
		content: "";
		right: 0;
		bottom: 0;
		background: #c797eb;
		/*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
			              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
			    inset -4px -4px 6px 0 rgba(255,255,255,.5),
			    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
		transition: all 0.3s ease;
	}

	.btn-8:before {
		height: 0%;
		width: 2px;
	}

	.btn-8:after {
		width: 0%;
		height: 2px;
	}

	.btn-8:hover:before {
		height: 100%;
	}

	.btn-8:hover:after {
		width: 100%;
	}

	.btn-8:hover {
		background: #FFF;
	}

	.btn-8 text:hover {
		color: #c797eb;
	}

	.btn-8 text:before,
	.btn-8 text:after {
		position: absolute;
		content: "";
		left: 0;
		top: 0;
		background: #c797eb;
		/*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
			              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
			    inset -4px -4px 6px 0 rgba(255,255,255,.5),
			    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
		transition: all 0.3s ease;
	}

	.btn-8 text:before {
		width: 2px;
		height: 0%;
	}

	.btn-8 text:after {
		height: 2px;
		width: 0%;
	}

	.btn-8 text:hover:before {
		height: 100%;
	}

	.btn-8 text:hover:after {
		width: 100%;
	}

	/* 6 */
	.btn-6 {
		background: rgb(247, 150, 192);
		background: radial-gradient(circle, rgba(247, 150, 192, 1) 0%, rgba(118, 174, 241, 1) 100%);
		line-height: 42px;
		padding: 0;
		border: none;
	}

	.btn-6 text {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}

	.btn-6:before,
	.btn-6:after {
		position: absolute;
		content: "";
		height: 0%;
		width: 1px;
		box-shadow:
			-1px -1px 20px 0px rgba(255, 255, 255, 1),
			-4px -4px 5px 0px rgba(255, 255, 255, 1),
			7px 7px 20px 0px rgba(0, 0, 0, .4),
			4px 4px 5px 0px rgba(0, 0, 0, .3);
	}

	.btn-6:before {
		right: 0;
		top: 0;
		transition: all 500ms ease;
	}

	.btn-6:after {
		left: 0;
		bottom: 0;
		transition: all 500ms ease;
	}

	.btn-6:hover {
		background: #FFF;
		color: #76aef1;
		box-shadow: none;
	}

	.btn-6:hover:before {
		transition: all 500ms ease;
		height: 100%;
	}

	.btn-6:hover:after {
		transition: all 500ms ease;
		height: 100%;
	}

	.btn-6 text:before,
	.btn-6 text:after {
		position: absolute;
		content: "";
		box-shadow:
			-1px -1px 20px 0px rgba(255, 255, 255, 1),
			-4px -4px 5px 0px rgba(255, 255, 255, 1),
			7px 7px 20px 0px rgba(0, 0, 0, .4),
			4px 4px 5px 0px rgba(0, 0, 0, .3);
	}

	.btn-6 text:before {
		left: 0;
		top: 0;
		width: 0%;
		height: .5px;
		transition: all 500ms ease;
	}

	.btn-6 text:after {
		right: 0;
		bottom: 0;
		width: 0%;
		height: .5px;
		transition: all 500ms ease;
	}

	.btn-6 text:hover:before {
		width: 100%;
	}

	.btn-6 text:hover:after {
		width: 100%;
	}
</style>